<template>
  <div class="settings-panel flex flex-col h-full">
    <!-- 面板标题 -->
    <div class="panel-header flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center">
        <Icon icon="material-symbols:settings" class="w-4 h-4 mr-2" />
        设置
      </h3>
      <button 
        @click="$emit('close')"
        class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
      >
        <Icon icon="material-symbols:close" class="w-4 h-4" />
      </button>
    </div>

    <!-- 设置内容 -->
    <div class="flex-1 overflow-auto">
      <div class="p-4 space-y-6">
        <!-- 外观设置 -->
        <div class="setting-section">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <Icon icon="material-symbols:palette" class="w-4 h-4 mr-2" />
            外观
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">主题模式</label>
              <select 
                v-model="settings.theme"
                @change="updateTheme"
                class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              >
                <option value="light">浅色</option>
                <option value="dark">深色</option>
                <option value="auto">跟随系统</option>
              </select>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">字体大小</label>
              <select 
                v-model="settings.fontSize"
                class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              >
                <option value="12">12px</option>
                <option value="14">14px</option>
                <option value="16">16px</option>
                <option value="18">18px</option>
                <option value="20">20px</option>
              </select>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">字体族</label>
              <select 
                v-model="settings.fontFamily"
                class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              >
                <option value="system">系统默认</option>
                <option value="mono">等宽字体</option>
                <option value="serif">衬线字体</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 编辑器设置 -->
        <div class="setting-section">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <Icon icon="material-symbols:edit" class="w-4 h-4 mr-2" />
            编辑器
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">显示行号</label>
              <button 
                @click="settings.showLineNumbers = !settings.showLineNumbers"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.showLineNumbers ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.showLineNumbers ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">自动换行</label>
              <button 
                @click="settings.wordWrap = !settings.wordWrap"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.wordWrap ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.wordWrap ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">自动保存</label>
              <button 
                @click="settings.autoSave = !settings.autoSave"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.autoSave ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.autoSave ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">Tab 大小</label>
              <select 
                v-model="settings.tabSize"
                class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              >
                <option value="2">2 空格</option>
                <option value="4">4 空格</option>
                <option value="8">8 空格</option>
              </select>
            </div>
          </div>
        </div>

        <!-- AI 设置 -->
        <div class="setting-section">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <Icon icon="material-symbols:psychology" class="w-4 h-4 mr-2" />
            AI 助手
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">启用 AI 助手</label>
              <button 
                @click="settings.aiEnabled = !settings.aiEnabled"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.aiEnabled ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.aiEnabled ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">自动建议</label>
              <button 
                @click="settings.autoSuggestions = !settings.autoSuggestions"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.autoSuggestions ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
                :disabled="!settings.aiEnabled"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.autoSuggestions ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">AI 模型</label>
              <select 
                v-model="settings.aiModel"
                :disabled="!settings.aiEnabled"
                class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 disabled:opacity-50"
              >
                <option value="gpt-3.5">GPT-3.5</option>
                <option value="gpt-4">GPT-4</option>
                <option value="claude">Claude</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 快捷键设置 -->
        <div class="setting-section">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <Icon icon="material-symbols:keyboard" class="w-4 h-4 mr-2" />
            快捷键
          </h4>
          
          <div class="space-y-2">
            <div 
              v-for="shortcut in shortcuts" 
              :key="shortcut.action"
              class="flex items-center justify-between py-2 px-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700"
            >
              <span class="text-sm text-gray-700 dark:text-gray-300">{{ shortcut.name }}</span>
              <div class="flex items-center space-x-2">
                <kbd class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded">
                  {{ shortcut.key }}
                </kbd>
                <button 
                  @click="editShortcut(shortcut)"
                  class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
                  title="编辑快捷键"
                >
                  <Icon icon="material-symbols:edit" class="w-3 h-3" />
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 高级设置 -->
        <div class="setting-section">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
            <Icon icon="material-symbols:tune" class="w-4 h-4 mr-2" />
            高级
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">启用性能监控</label>
              <button 
                @click="settings.performanceMonitoring = !settings.performanceMonitoring"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.performanceMonitoring ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.performanceMonitoring ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">自动更新检查</label>
              <button 
                @click="settings.autoUpdate = !settings.autoUpdate"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.autoUpdate ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.autoUpdate ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
            
            <div class="flex items-center justify-between">
              <label class="text-sm text-gray-600 dark:text-gray-400">发送使用统计</label>
              <button 
                @click="settings.analytics = !settings.analytics"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settings.analytics ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
              >
                <span 
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settings.analytics ? 'translate-x-6' : 'translate-x-1'"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作 -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex space-x-2">
        <button 
          @click="resetSettings"
          class="flex-1 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
        >
          重置默认
        </button>
        <button 
          @click="exportSettings"
          class="flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
        >
          导出设置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Icon } from '@iconify/vue'

defineEmits<{
  close: []
  'theme-change': [theme: string]
}>()

// 设置数据
const settings = reactive({
  theme: 'light',
  fontSize: '14',
  fontFamily: 'system',
  showLineNumbers: true,
  wordWrap: true,
  autoSave: true,
  tabSize: '4',
  aiEnabled: true,
  autoSuggestions: false,
  aiModel: 'gpt-3.5',
  performanceMonitoring: false,
  autoUpdate: true,
  analytics: false
})

// 快捷键配置
const shortcuts = ref([
  { action: 'save', name: '保存文件', key: 'Ctrl+S' },
  { action: 'new', name: '新建文件', key: 'Ctrl+N' },
  { action: 'open', name: '打开文件', key: 'Ctrl+O' },
  { action: 'bold', name: '加粗', key: 'Ctrl+B' },
  { action: 'italic', name: '斜体', key: 'Ctrl+I' },
  { action: 'find', name: '查找', key: 'Ctrl+F' },
  { action: 'replace', name: '替换', key: 'Ctrl+H' },
  { action: 'preview', name: '切换预览', key: 'Ctrl+P' }
])

// 方法
const updateTheme = () => {
  // 发送主题变更事件
  console.log('主题已更改为:', settings.theme)
}

const editShortcut = (shortcut: any) => {
  console.log('编辑快捷键:', shortcut.action)
  // 这里可以打开快捷键编辑对话框
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置为默认值吗？')) {
    Object.assign(settings, {
      theme: 'light',
      fontSize: '14',
      fontFamily: 'system',
      showLineNumbers: true,
      wordWrap: true,
      autoSave: true,
      tabSize: '4',
      aiEnabled: true,
      autoSuggestions: false,
      aiModel: 'gpt-3.5',
      performanceMonitoring: false,
      autoUpdate: true,
      analytics: false
    })
    console.log('设置已重置为默认值')
  }
}

const exportSettings = () => {
  const settingsJson = JSON.stringify(settings, null, 2)
  const blob = new Blob([settingsJson], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'editor-settings.json'
  a.click()
  URL.revokeObjectURL(url)
  console.log('设置已导出')
}
</script>